<div class="container h-100">
  <div class="row h-100">
  <div class="col-sm-10 col-md-8 col-lg-6 mx-auto d-table h-100">
    <div class="d-table-cell align-middle">

      <div class="text-center mt-4">
        <h1 class="h2">Get started</h1>
        <p class="lead">
          Start creating the best possible user experience for you customers.
        </p>
      </div>

      <div class="card">
        <div class="card-body">
          <div class="m-sm-4">
            <form #registerForm="ngForm" (ngSubmit)="register(registerForm)">
              <div class="form-group">
                <label>UserName</label>
                <input ngModel name="username" id="username" class="form-control form-control-lg" type="text" placeholder="Enter your username" required >
              </div>
              <div class="form-group">
                <label>Password</label>
                <input ngModel name="password" id="password" class="form-control form-control-lg" type="password" placeholder="Enter your password" required>
              </div>
              <div class="form-group">
                <label>Confirm Password Again</label>
                <input ngModel name="passwordAgain" id="passwordAgain" class="form-control form-control-lg" type="password" placeholder="Confirm your password again" required>
              </div>
              <div class="form-group">
                <label>NickName</label>
                <input ngModel name="nickname" id="nickname"  class="form-control form-control-lg" type="text" placeholder="Enter your nickname">
              </div>
              <div class="text-center mt-3">
                <button [disabled]="registerForm.invalid" type="submit" class="btn btn-lg btn-primary">Sign up</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
